<template>
	<div class="main">
		<a-form
			class="user-layout-login"
			ref="form"
			:model="form"
			@finish="handleSubmit"
		>
            <div class="text-center head">
                <h2>后台管理系统</h2>
                <p>请登录账号后使用。</p>
            </div>
			<a-tabs
				:activeKey="customActiveKey"
				:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
				@change="key=>customActiveKey = key"
			>
				<a-tab-pane key="tab1" tab="用户名密码登陆">
					<a-form-item
                        name="username"
                        :rules="[ { required: true, message: '请输入用户名' } ]"
                    >
						<a-input
							size="large"
							type="text"
							placeholder="用户名"
                            v-model:value="form.username"
						>
							<template #prefix>
								<UserOutlined />
							</template>
						</a-input>
					</a-form-item>

					<a-form-item
                        name="password"
                        :rules="[  { required: true, message: '请输入密码' }  ]"
                    >
						<a-input-password
							size="large"
							placeholder="用户密码"
							v-model:value="form.password"
						>
							<template #prefix>
								<LockOutlined />
							</template>
						</a-input-password>
					</a-form-item>

					<a-row :gutter="16">
						<a-col class="gutter-row" :span="15">
							<a-form-item name="code" :rules="[{ required: true, message: '请输入验证码' }]">
								<a-input
									size="large"
									type="text"
									placeholder="验证码"
							        v-model:value="form.code"
								>
									<template #prefix>
										<KeyOutlined />
									</template>
								</a-input>
							</a-form-item>
						</a-col>
						<a-col class="gutter-row" :span="9">
							<img class="cursor codeimg" :src="codeimg" @click="getcodeimg" />
						</a-col>
					</a-row>
				</a-tab-pane>
			</a-tabs>

			<a-form-item>
				<!-- <a-checkbox v-model:checked="form.keep">保持登陆</a-checkbox> -->
				<!-- <a-checkbox v-model:checked="form.auto">自动登陆</a-checkbox> -->
			</a-form-item>

			<a-form-item style="margin-top:24px">
				<a-button
					size="large"
					type="primary"
					htmlType="submit"
					class="login-button"
					:loading="state.loginBtn"
					:disabled="state.loginBtn"
				>登陆</a-button>
			</a-form-item>
		</a-form>

	</div>
</template>

<script>
export default {
	components: {
	},
	data () {
		return {
			customActiveKey: 'tab1',
			form: {
				keep:this.$cache('form.keep')||false,
				auto:this.$cache('form.auto')||false
			},
			state: {
				loginBtn: false,
			},
			codeimg:'',//验证码图
		}
	},
	created () {
		this.getcodeimg();
		document.title = "管理控制台--登录"
	},
	methods: {
		async handleSubmit (e) {
			this.state.loginBtn=true;
			let rs = await this.muajax.login(this.form);
			if(rs.status==200){
				this.loginSuccess(rs);
			}else{
				setTimeout(()=>{
					this.getcodeimg();
				},2000);
			}
			setTimeout(()=>{
				this.state.loginBtn = false;
			},1000);
		},//登录
		loginSuccess (res) {
			this.$store.dispatch('saveUser',res.data);
			this.$router.push({ path: '/' })
			// 延迟 1 秒显示欢迎信息
			setTimeout(() => {
				this.$notification.success({
					message: '欢迎',
					description: `${res.data.user_name}，欢迎回来`
				})
			}, 1000)
		},//登录成功
		async getcodeimg(){
			let rs = await this.muajax.codeimg();
			console.log(rs.data)
			if(rs.code==1){
				this.codeimg=rs.image;
				this.form.codeidenty=rs.key;
				// this.form.code=rs.value;
			}
		},//获取二维码
	},
	watch:{
		'form.keep':function(newval,oldval){
			this.$cache('form.keep',newval);
		},
		'form.auto':function(newval,oldval){
			this.$cache('form.auto',newval);
		}
	}
}
</script>

<style lang="less" scoped>
.main{
	height: 100%;
	background: url('~@/assets/background.svg') no-repeat center center/100%;
}
.user-layout-login {
    width: 360px;
    margin: 0 auto;
    padding-top: 7vh;
    .head{
        img{
            height: 60px;
        }
        h2{
            font-weight: bold;
            font-size: 28px;
            margin-bottom: 0;
        }
    }
	label {
		font-size: 14px;
	}

	button.login-button {
		padding: 0 15px;
		font-size: 16px;
		height: 40px;
		width: 100%;
	}
}
.codeimg{
	height: 40px;
	width: 100%;
}
</style>
